<template>
  <div id="product_container">
    <header-nav :headTitle="productData.product_name" :goBack="true"></header-nav>
    <div class="product_detail"  v-if="productData">
      <h1 class="product_name">{{ productData.product_name }}</h1>
      <p class="product_img" v-show="productData"><img :src="productBaseUrl + productData.product_image" alt=""></p>
      <p class="product_price">￥ {{ productData.price }}</p>
      <p v-show="productData" class="product_buy" @click="addToCart(productData.product_id, productData.product_name, productData.price, productData.product_image)">BUY NOW</p>
    </div>
    <transition name="loading" v-else>
      <loading v-show="!productData"></loading>
    </transition>
    <footer-nav></footer-nav>
  </div>
</template>

<script>
  import {mapState, mapMutations} from 'vuex'
  import HeaderNav from '../../components/HeaderNav.vue'
  import FooterNav from '../../components/FooterNav.vue'
  import Loading from '../../components/Loading.vue'
  import { productDetail } from '../../service/getData'
  import { imgBaseUrl } from '../../config/env'
  export default {
  	data() {
  		return {
  			productId: null,
        productData: {},
        productBaseUrl: 'https://s3.cn-north-1.amazonaws.com.cn/cdn.smartbuyglasses.cn/image/en/images/',
      }
    },
    components: {
      HeaderNav,
      FooterNav,
      Loading
    },
    created() {
  		if(!this.productId) {
  			this.productId = this.$route.query.product_id
      }
      this.initData()
      this.INIT_BUYCART()
    },
    computed: {
      ...mapState([
        'cartList'
      ]),
    },
    methods: {
      ...mapMutations([
        'INIT_BUYCART', 'ADD_CART'
      ]),
  		async initData() {
  			await productDetail(this.productId).then(res => {
  				this.productData = res.data
        })
      },
      addToCart(product_id, name, price, image) {
      	this.ADD_CART({product_id, name, price, image})
        this.$router.push('/cart')
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../style/mixin';
  #product_container {
    padding-top:1.9rem;
  }
  .product_detail {
    text-align: center;
    background-color: #fff;
    padding-bottom: 40px;
    .product_name {
      padding:0.5rem 0;
      @include sc(0.85rem, #434343);
    }
    .product_img {
      img {
        width: 100%;
      }
    }
    .product_price {
      font-family: Helvetica;
      text-align: center;
      color: #f19124;
      font-size: 1.2rem;
    }
    .product_buy {
      width: 80%;
      display: block;
      background-color: #7ec801;
      color: #fff;
      height: 1.60740rem;
      line-height: 1.40740rem;
      font-size: 0.56667rem;
      text-align: center;
      margin-bottom: 0.34444rem;
      border-radius: 10px;
      margin:50px auto;
    }
  }
  .loading-enter-active, .loading-leave-active {
    transition: opacity 1s
  }
  .loading-enter, .loading-leave-active {
    opacity: 0
  }
</style>
